<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>FUI</title>

    <link rel="stylesheet" type="text/css" href="../theme/default/fui.all.css">

    <script src="../dev-lib/jhtmls.min.js"></script>
    <script src="../dev-lib/jquery-1.11.1.js"></script>
    <script src="../dev-lib/dev-define.js"></script>
    <script>
        inc.config({
            base: '../src'
        });
    </script>
    <script src="../dev-lib/exports.js"></script>
    <script src="../dev-lib/dev-start.js"></script>
    <script>
        window.onload = function () {

            initCommonButton();
            initToggleButton();

        };

        function initCommonButton () {

            var panel = new FUI.Panel(),
                button = new FUI.Button( {
//                    disabled: true,
//                    preventDefault: true,
                    label:'按钮',
                    text: '清理垃圾',
                    width: 500,
                    height: 40,
//                    icon: "demo/assets/icon/clean.png",
                    icon: {
                        img: 'assets/icon/clean.png'
                    },
//                        layout: 'bottom',
                    padding: '2px 10px'
                } );

            button.on( "click", function ( e ) {

                console.log( 'this: ' + this.widgetName )
                console.log( 'event: ' + e.type )

                console.log( this.getLabel() )
                this.setLabel( "为什么呢" );

            } );

            button.on( "labelchange", function ( e, info ) {

                console.log( e.type )
                console.log( info.currentText )
                console.log( info.prevText )

            } );

            panel.appendWidget( button );

            panel.appendTo( $( "#common" )[ 0 ] );

//            panel.disable();

        }

        function initToggleButton () {

            var button = new FUI.ToggleButton( {
//                    disabled: true,
//                    preventDefault: true,
                    pressed: true,
                    label: {
                        text: 'Linux'
                    },
                    text: '启动Linux',
                    icon: 'assets/icon/linux.png',
                    layout: 'right'
                } );

            button.on( "change", function ( e, currentState, oldState ) {

                console.log( this.widgetName + " 发生了 " + e.type + " 事件; 当前按钮" +
                        ( this.isPressed() ? "已" : "未" ) + "按下!" +
                        "按钮当前的状态值: "+ currentState);

//                this.disable();

            } );

            button.on( "click", function () {

                this.setLabel( 'Unix' );

            } );

            button.on( "labelchange", function ( e, info ) {

                console.log( e.type + '： from "' + info.prevText + '" to "' + info.currentText + '"'  )

            } );

            console.log( '当前按钮是否已经按下? ' + button.isPressed() );

            button.appendTo( $( "#toggle" )[ 0 ] );

            window.button = button;

        }

    </script>
</head>
<body>
    <h1>FUI Button Widget 示例</h1>
    <h2>通用Button</h2>
    <div id="common"></div>
    <h2>可切换Button</h2>
    <div id="toggle"></div>
</body>
</html>